<template>
  <div class="searchbox">
    <el-input
      v-model="inputtext"
      :placeholder="hodertext"
      clearable
      @clear="clearinput"
    ></el-input>
    <el-button size="medium " type="primary" @click="tosearch()"
      >查找</el-button
    >
    <el-button size="medium " type="primary" @click="toadd()">{{
      addtext
    }}</el-button>
    <el-button
      size="medium "
      type="danger"
      @click="todel()"
      v-if="type === 'Sort'"
      >删除选中</el-button
    >
    <el-button size="medium " type="info" @click="sortbyclick()"
      >点击量排序</el-button
    >
    <el-button size="medium " type="info" @click="sortbynum()"
      >引用量排序</el-button
    >
  </div>
</template>

<script>
// /blogSortdel,
import {
  blogSortByCite,
  tagSortByCite,
  blogSortByClickCount,
  tagSortByClickCount,
} from "@/api/blog.js";
export default {
  name: "smallSarch",
  props: {
    hodertext: {
      required: true,
    },
    addtext: {
      required: true,
    },
    type: {
      required: true,
    },
  },
  data() {
    return {
      inputtext: "",
    };
  },
  methods: {
    clearinput() {
      this.inputtext = "";
      this.$emit("tosearch", this.inputtext);
    },
    tosearch() {
      if (!this.inputtext) return this.$message.warning("请填写内容");
      this.$emit("tosearch", this.inputtext);
    },
    toadd() {
      console.log("toadd");
      console.log(this.type);
    },
    todel() {
      console.log("todel");

      // const res = await blogSortdel();
    },
    async sortbyclick() {
      this.type === "sort"
        ? await blogSortByClickCount()
        : await tagSortByClickCount();
      this.$emit("changelist");
    },
    async sortbynum() {
      this.type === "sort" ? await blogSortByCite() : await tagSortByCite();
      this.$emit("changelist");
    },
  },
};
</script>

<style lang="less" scoped>
.searchbox {
  margin: 20px;
  margin-left: 0;
}
.el-input {
  width: 250px;
}
.el-button {
  margin-left: 10px;
}
</style>
